<template>
  <div class="scrollbox">
    <!-- 头部 -->
    <v-header :menus="[{key: 'tag', value: '标签'}, {key: 'black', value: '黑标签'}]" @selected="selectMenu"></v-header> 
    <div class="dis10"></div>   
    <div class="listbox aps8"> 
      <v-list :api="listapi" ref="list" :cols="editData.cate=='tag' ? '50,0,130,100,110' : '50,0,110'" :params="params" cards="1">
        <template slot="search">
          <el-button class="operate" size="small" type="primary" icon="el-icon-plus" @click="edit(params)">新增标签
          </el-button>&nbsp;&nbsp;
          <el-dropdown @command="batchHandle" v-if="editData.cate=='tag'">
            <el-button type="default" size="small">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item  command="del">批量删除</el-dropdown-item>
              <el-dropdown-item  command="sh">批量解锁</el-dropdown-item>
              <el-dropdown-item  command="unsh">批量锁定</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>&nbsp;&nbsp;
          <el-select v-model="params.type" size="small"  v-if="editData.cate=='tag'">
            <el-option :value="index" :label="item" v-for="(item, index) in $config('resources_type')" :key="index"></el-option>
          </el-select>
          <span class="fr">
            <el-button v-if="editData.cate == 'black'" class="operate" size="small" type="default" @click.stop="refresh_black_tag">清除黑标签缓存</el-button>
          </span>
        </template>
        <template slot="head" slot-scope="props">
          <thead>
            <tr>
            <th ><input type="checkbox" @click.stop="$refs.list.selAll" v-if="editData.cate=='tag'" /></th>
            <th>名称</th>
            <th v-if="editData.cate=='tag'">使用频次
              <i
                    :class="props.filter.orderby == 'sort|desc' ? 'el-icon-arrow-up': 'el-icon-arrow-down'"
                    @click.stop="$refs.list.setOrderby('sort','')"
                  ></i>
            </th>
            <th v-if="editData.cate=='tag'">状态</th>
            <th>操作</th>
          </tr>
          </thead>
        </template>
        <template slot="item" slot-scope="props">
          <tr class="tr">
          <td><input type="checkbox" v-model="props.item.choose" v-if="editData.cate=='tag'" /></td>
          <td>
            <span class="f14 font-blue">{{props.item.tag_name}}</span>
          </td>
          <td v-if="editData.cate=='tag'">
           <span class="font-gray2"> {{props.item.counts}} </span>
          </td>
          <td v-if="editData.cate=='tag'">
           <span v-if="props.item.inlock == 0" class="font-green">正常</span>
            <span v-else class="font-red">锁定</span>
          </td>
          <td>
              <el-button size="mini" type="primary" icon="el-icon-edit" circle
                @click="edit(props.item)">
              </el-button>
              <el-button size="mini" type="default" icon="el-icon-delete" circle
                @click="del(props.item)">
              </el-button>
          </td>
        </tr>
        </template>
      </v-list>
    </div>

    <!-- 编辑 -->
    <el-dialog
      :title="editData.title"
      :visible.sync="editData.status"
      width="680px" top="7vh">
      <div class="dialogform">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" label-position="right" class="demo-ruleForm">          
          <el-form-item label="标签名">
            <el-input :type="editData.id > 0 ? '' : 'textarea'" :rows="17" class="w500" placeholder="标签名" v-model="form.tag_name"></el-input>
          </el-form-item>
          <template v-if="editData.cate == 'tag'">              
            <el-form-item label="排序" prop="sort">
              <el-input v-model="form.sort" class="w100"></el-input>
            </el-form-item>
            <el-form-item label="是否锁定" prop="inout">
              <el-radio-group v-model="form.inlock">
                <el-radio label="1">锁定</el-radio>
                <el-radio label="0">正常</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>   
          <el-form-item label="" prop="inlock">
            <template v-if="status">
              <span class="font-gray2">处理中...请稍后</span>
            </template>
            <template v-else>
              <el-button type="primary" @click="save">保 存</el-button>
              <el-button @click="editData.status = false">取 消</el-button>
            </template>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="tc"> 
      </div>
    </el-dialog>
    <!-- 编辑结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        tag_name: '',
        type: '',
        inlock: '0',
        sort: '0'
      },
      editData: {
        status: false,
        title: '新增/修改标签',
        id: 0,
        cate: 'tag'
      },
      rules: {
        tag_name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 1, message: "名称不能为空", trigger: "blur" }
        ],
      },
      params: {
        type: 'video'
      },
      listapi: 'resources_tag.get_list',
      status: false
    };
  },
  methods: {
    selectMenu (item) {
      this.editData.cate = item.key
      if (this.editData.cate == 'tag') {
        this.listapi = 'resources_tag.get_list'
      } else if (this.editData.cate == 'black') {
        this.listapi = 'resources_tag.get_black_list'
      }
    },
    edit(item) {
      this.editData.status = true
      this.editData.id = item.id || 0
      this.form.id = this.editData.id
      this.form.type = this.params.type
      this.form.inlock = item.inlock || '0'
      this.form.tag_name = item.tag_name || ''
      this.form.sort = item.sort || '0'
    },
    save() {
      let that = this
      that.form.type = that.params.type
      that.$refs['form'].validate((valid) => {
        if (valid) {
          let url
          if (that.editData.cate == 'tag') {
            url = that.editData.id > 0 ? 'resources_tag.edit_tag' : 'resources_tag.add_tag'
          } else {
            url = 'resources_tag.add_black_tag'
          }          
          that.status = true
          that.$api.post(url, that.form).then((res) => {
            if (res.status === 1) {
              that.$success(res.msg)
              that.$refs.list.fetchData()
              that.editData.status = false
            } else {
              that.$error(res.msg)
            }
            that.status = false
          })
        }
      })
    },
    del(row) {
      let that = this
      that.$confirm('此操作会将该彻底删除，不可恢复, 是否继续?', '删除提醒').then(() => {
        let url = (this.editData.cate == 'tag') ? 'resources_tag.del_tag' : 'resources_tag.del_black_tag'
        that.$api.post(url, { ids: [row.id], type: this.params.type }).then((res) => {
          if (res.status === 1) {
            that.$success(res.msg)
            that.$refs.list.fetchData()
          } else {
            that.$error(res.msg)
          }
        })
      }).catch(() => {
      })
    },
    batchHandle (command) {
      let ids = this.$refs.list.fetchSel('id')
      if (!ids || ids.length <1) {
        this.$error('请选择要操作的标签')
        return false
      }
      if (command == 'del') {
        this.batchDel(ids)
      } else if (command == 'sh') {
        this.batchSh(ids, 0)
      } else if (command == 'unsh') {
        this.batchSh(ids, 1)
      }
    },
    batchDel (ids) {
      let that = this
      that.$confirm('此操作会将该彻底删除，不可恢复, 是否继续?', '删除提醒').then(() => {
        let url = (this.editData.cate == 'tag') ? 'resources_tag.del_tag' : 'resources_tag.del_black_tag'
        that.$api.post(url, { ids: ids }).then((res) => {
          if (res.status === 1) {
            that.$success(res.msg)
            that.$refs.list.fetchData()
          } else {
            that.$error(res.msg)
          }
        })
      })
    },
    batchSh (ids, inlock) {
      let that = this
      that.$confirm('此操作会将' + (inlock ? '锁定' : '解锁') + ', 是否继续?', '批量操作提醒').then(() => {
        let url = (this.editData.cate == 'tag') ? 'resources_tag.sh_tag' : 'resources_tag.sh_tag'
        that.$api.post(url, { ids: ids, inlock: inlock }).then((res) => {
          if (res.status === 1) {
            that.$success(res.msg)
            that.$refs.list.fetchData()
          } else {
            that.$error(res.msg)
          }
        })
      })
    },
    // 刷新缓存
    refresh_black_tag () {
      this.$api.get("resources_tag.refresh_black_tag", this.params).then(res => {
        if (res.status === 1) {
          this.$success(res.msg)
        }
      })
    }
  },  
  mounted() {
  }
};
</script>

<style lang="scss" scoped>
.tabs {
  width: 290px;
}
</style>
